import React from 'react';
import { Table, Spin } from 'antd';
import { EventUtils } from 'share/common';
import 'styles/data-center/report-management/custom-report/report-table.scss';

const { PropTypes } = React;
import ReportWrapper from 'components/template/graphic-report/report-wrapper';

const CELL_HEIGHT = 32;

@ReportWrapper
class ReportTable extends React.Component {
  deltaY = 0;

  state = {
    loading: false,//是否正在加载
    params: {},
    list: [],
    pagination: {
      page: 0,
      size: 20,
      hasMore: true
    },
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { onRef, reportKey } = this.props;
    onRef && onRef({ ref: this, reportKey });
  }

  fetchList = (params, reset = true) => {
    const { fetchMethod } = this.props;
    const { pagination, loading } = this.state;
    if (loading || (!pagination.hasMore && !reset)) return Promise.resolve();
    if (reset) {
      pagination.page = 0;
    }
    this.setState({
      loading: true,
      params
    });
    return fetchMethod(params, pagination)
      .then((res) => {
        let { list } = this.state;
        const { data = [], noMoreData } = res;
        if (reset) {
          list = [];
        }
        list.push(...data);
        pagination.page++;
        if (noMoreData) {
          pagination.hasMore = false;
        } else {
          pagination.hasMore = data.length === pagination.size;
        }
        this.setState({
          list,
          pagination,
          loading: false
        }, ()=>{
          if (this.props.isColumsDefineByData) {
            this.props.callbackDataList && this.props.callbackDataList(list);
          }
        });
      })
      .catch(() => {
        this.setState({
          loading: false
        });
      });
  };

  handleScroll = (e) => {
    let { pagination, params, list } = this.state;
    e = EventUtils.getEvent(e);
    const { deltaY } = e.nativeEvent;

    if (this.deltaY <= 0 && deltaY <= 0) {
      this.deltaY = 0;
    } else if (this.deltaY >= list.length * CELL_HEIGHT && deltaY >= 0) {
      this.deltaY = list.length * CELL_HEIGHT;
      e.stopPropagation();
    } else {
      this.deltaY += deltaY;
    }

    if (deltaY <= 0) {
      //向上滚动
    } else {
      const { page, size } = pagination;
      if (this.deltaY > page * size * CELL_HEIGHT - CELL_HEIGHT * 10) {
        this.fetchList(params, false);
      }
    }
  };

  render() {
    const { columns, fullScreenMode, headerNum, isOutOfService } = this.props;
    const { list, loading } = this.state;
    return (
      <div className='report-table-custom'>
        {!isOutOfService && <div
          className={`report-table-wrapper-custom ${fullScreenMode ? 'full-screen-mode' : ''} headerNum-${headerNum}`}
          onWheel={this.handleScroll}>
          <Table
            columns={columns}
            loading={loading}
            size="small"
            bordered
            rowKey={'uniqueKey'}
            scroll={{ x: columns.length * 100, y: CELL_HEIGHT * 10 }}
            dataSource={list}
            pagination={false}
          />
        </div>}
      </div>
    );
  }

  static propTypes = {
    onRef: PropTypes.func,
    reportKey: PropTypes.string,
    title: PropTypes.string,
    columns: PropTypes.array,
    fetchMethod: PropTypes.func,
  };

  static defaultProps = {
    onRef: () => {
    },
    fetchMethod: () => {
    },
    columns: []
  };
}


export default ReportTable;
